/// 页面 * 表格

<template>
  <Page>
    <ExGrid v-bind="grid.bind" />
    <button @click="onGridValue"> Grid Value </button>
    <button @click="onGridEdit"> Grid Edit </button>
  </Page>
</template>

<script setup lang="tsx">
import { Input, Select } from 'ant-design-vue'
// import { VxeInput } from 'vxe-pc-ui'
import { rowsData } from './helper'
import type { RowData } from './types'

const grid = useGrid<RowData>({
  height: 300,
  align: null,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    {
      field: 'name',
      title: 'name',
      // editRender: { name: 'VxeInput' }
      editRender: {},
      slots: {
        // default: ({ row }) => <Input class="vxe-input" v-model:value={row.name} />,
        // edit: ({ row }) => <Input class="vxe-input" v-model:value={row.name} />,

        default: ({ row }) => row.name, // <Select class="vxe-input" v-model:value={row.name} />,
        edit: ({ row }) => <Select class="vxe-input" v-model:value={row.name} />,
      },
    },
    { field: 'sex', title: 'sex' },
    { field: 'address', title: 'Address' },
  ],
  editConfig: {
    mode: 'cell',
    trigger: 'click',
    showIcon: false,
    autoClear: true,
    // showStatus: true,
  },
  editRules: {
    name: [{ required: true, message: 'Name is required' }],
  },
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
  },
  slots: {
    input: () => <Input />,
    toolbar_buttons: () => (
      <>
        <button onClick={() => (grid.bind.align = 'left')}>居左</button>
        <button onClick={() => (grid.bind.align = 'center')}>居中</button>
        <button onClick={() => (grid.bind.align = 'right')}>居右</button>
      </>
    ),
  },
  data: rowsData,
})

const onGridValue = () => {
  grid.getData().length = 3
  grid.setBind({ data: [...grid.getData()] })
  console.log(grid.getData())
  console.log(grid.getData(true))
  console.log(grid.api?.getData())
}

const onGridEdit = () => {
  // grid.data.forEach((row) => {
  //   console.log(row)
  //   grid.api.setEditCell(row, 'name')
  // })

  grid.api.validate(true)
}
</script>

<style scoped lang="scss"></style>
